import React, { useEffect, useState } from 'react';
import styles from './index.module'
import { Form, Input } from 'antd-mobile'
import searchIcon from '@/assets/icons/search.svg';
import { FilterOutline } from 'antd-mobile-icons'
import classNames from 'classnames'
const Search = ({activeKey, activeCategoryId, categoryList, setActiveCategoryId, searchValue, setSearchValue, setFlag }) => {
  console.log(`-------piud`, activeCategoryId)
  console.log(`-------categoryList`, categoryList)
  const [isBlock, setIsBlock] = useState(false)
  const [value, setValue] = useState(searchValue)
  /**
   * 设置搜索内容
   */
  const setKeyword = (keyword) => {
    if (keyword) {
      // setSearchValue(keyword)
      setValue(keyword)
      // this.setState({
      //   suggestList: [],
      //   searchValue: keyword,
      //   keyword,
      // });
      // // 记录当前搜索历史
      // storage.setSearchHistory({
      //   value: keyword,
      //   timestamp: new Date().getTime()
      // });
    }
  }
  /**
   * 清楚搜索内容
   */
  const clearSearch = () => {
    setValue('')
    setSearchValue('')
    // setKeyWords('')
    // this.setState({
    //   suggestList: [],
    //   searchValue: "",
    //   keyword: "",
    //   searchHistories: storage.getSearchHistory()
    // });
  }
  const getSuggests = (e) => {
    console.log(`----->getSuggests`, e)
    if (e.keyCode !== 13) {
      const content = e.currentTarget.value;
      if (content) {
        setKeyword(content)
        // setKeyWords(content)
        // getSuggests(content).then((result) => {
        //   if (result.code === "1") {
        //     let suggestList = [];
        //     if (result.data.tag) {
        //       suggestList = result.data.tag.map((item) => ({name: item.name, value: item.value}))
        //     }
        //     this.setState({
        //       suggestList,
        //       keyword: ""
        //     });
        //   }
        // });
      }
    } else {
      const content = e.currentTarget.value;
      if (content) {
        setKeyword(content)
        setSearchValue(content)
      } else {
        setKeyword(content)
        setSearchValue(content)
      }
    }
  }
  /**
   * 设置搜索内容
   */
  const setSearchContent = (e) => {
    if (e.keyCode === 13) {
      const content = e.currentTarget.value;
      if (content) {
        setKeyword(content)
        // this.setState({
        //   suggestList: [],
        //   keyword: content
        // });
        // // 记录当前搜索历史
        // storage.setSearchHistory({
        //   value: content,
        //   timestamp: new Date().getTime()
        // });
      }
    } else {
      const content = e.currentTarget.value;
      setKeyword(content)
    }
  }
  const handleSetDefaultCategoryId = (value) => {
    console.log(`-------value`, value)
    console.log(`-------activeKey`, activeKey)
    setFlag(prevCount => prevCount+1)
    if (value === activeCategoryId) {
      setActiveCategoryId(activeKey)
    } else {
      setActiveCategoryId(value)
    }
  }
  useEffect(() => {
    console.log("🚀 ~ Search ~ setIsBlock:", isBlock)
    console.log(`--------`,categoryList?.length > 0 && setIsBlock)
  }, [isBlock, categoryList])
  useEffect(() => {
    setIsBlock(false)
  }, [activeCategoryId])
  return (
    <div>
      <div className={styles.searchTop}>
        <FilterOutline 
          fontSize={24} 
          color={isBlock ? 
            getComputedStyle(document.documentElement).getPropertyValue('--theme-primary').trim() : 
            getComputedStyle(document.documentElement).getPropertyValue('--theme-text-muted').trim()
          } 
          onClick={() => setIsBlock(!isBlock)}
        />
        <div className={styles.boxWrapper}>
          {/* <i className={styles.iconSearch} /> */}
          <img src={searchIcon} alt="" className={styles.iconSearch} />
          <input
            type="search"
            autoComplete="off"
            maxLength={33}
            placeholder="请输入搜索关键词"
            value={value}
            className={styles.searchBox}
            onChange={(e) => { setValue(e.currentTarget.value) }}
            onKeyDown={(e) => setSearchContent(e)}
            onKeyUp={(e) => getSuggests(e)}
          />
          {
            value ? (
              <i className={styles.searchClose} onClick={() => clearSearch()} />
            ) : null
          }
        </div>
        <span className={styles.cancel} onClick={() => { window.history.back(); }}>取消</span>
      </div>
      {
        categoryList?.length > 0 && isBlock && (
          <div className={styles.categoryListWrap} >
            {}
          <p className={styles.categoryTitle}>分类 </p>
          <p>
            {
              categoryList?.map(f => (
                <span key={f.id} className={classNames(activeCategoryId === f.id? styles.categoryActive: '',styles.categoryItem)} onClick={() => handleSetDefaultCategoryId(f.id)}>{f.name}</span>
              ))
            }
          </p>
        </div>
        )
      }
    </div>
  )
}
export default Search